<template>
  <!-- 视频推荐 -->
  <div class="video-container" v-if="videoRecommendation">
    <div class="video-recommendation">
      <div class="left">
        <img src="@/assets/images/zxjt/juxing.png" alt="">
        <span>{{ this.$channel === 'zxjtqh' ? '热门视频' : '视频推荐' }}</span>
      </div>
      <div class="right" @click="clickVideoMore" v-if="VideoMoreNum">
        <span @click="homeFunctionDot('更多')">更多</span>
        <img src="@/assets/images/zxjt/gengduo.png" alt="">
      </div>
    </div>
    <div class="items">
          <ul>
            <li v-for="(item, index) in imageList" :key="index"  @click="videoContainer(item, index)">
              <img :src="item.imagUrl + '?x-oss-process=image/resize,m_fixed,h_188,w_334'" alt="">
              <p class="item-top">{{ item.title == null ? " " : item.title }} &nbsp; </p>
              <p class="item-bottom">{{ item.subTitle == null ? " " : item.subTitle }} &nbsp; </p>
            </li>          
          </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [],
      videoRecommendation: false,
      VideoMoreNum: true, //更多按钮是否显示
    }
  },
  created() {
    this.getVideoRecommendationList()
  },
  //取消了首页缓存 所以每次都会进入都会走create
  // activated: function() {
  //   this.getVideoRecommendationList()
  // },
  methods: {
    getVideoRecommendationList() {
      //获取视频推荐列表
      let data = {
        "p": 1,
        "sel": '',
        "pType": '',
        "type": '',
      };
      this.$http.get('/h5live/getHomeVideo', { params: data }).then(res => {
        if (res.data.code == "000000") {
          let data = res.data.data;
          if (data.length == 0) {
            this.videoRecommendation = false;
          } else {
            if (data.length > 4) {
              data.splice(4)
              this.imageList = data;
            } else {
              this.imageList = data;
            }
            this.videoRecommendation = true;
          }
          if (data.length <= 2) {
            this.VideoMoreNum = false;
          }
        }
      }).catch(function (error) {
        console.log(error);
      });
    },
    videoContainer(item) {
      this.LiveRoomClickDot(item.roomId,item.title,item.roomStatus,item.orgName)
      // 每一项的跳转
      this.$router.push({
        path: `/${this.$channel}/liveBack/${item.id}?dzhPage=true`
      });
    },
    clickVideoMore() {
      // 更多按钮
      this.$router.push({
        path: `/${this.$channel}/videoRecommendationMore`
      });
    },
    //中信建投功能埋点
    homeFunctionDot(functionName) {
      if (this.$channel !== 'zxjt') return
      $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick',
        {
          page_name: '首页',
          module_name: '视频推荐',
          function_name: functionName
        }
      );
    },
    //直播间点击埋点
    LiveRoomClickDot(roomId, roomName, roomStatus, roomCreator) {
      if (this.$channel !== 'zxjt') return
      $sensorsTrack('liveBroadcast_liveRoomClick',
        {
          page_name: '首页',
          module_name: '视频推荐',
          user_nickname: localStorage.getItem("userNickName"),
          live_room_id: roomId,
          live_room_name: roomName,
          live_room_status: roomStatus == '1' ? '直播中' : roomStatus == '0' ? '预告' : '回看',
          live_room_creator: roomCreator
        }
      );
    }
  }
}
</script>

<style scoped="scoped" lang="less">
.video-container {
  padding: 0px 30px 0 29px;
  .items{
    ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 30px;
      li{
        display: flex;
        flex-direction: column;
        margin-bottom: 5px;
        // align-items: center;
        img{
          width: 334px;
          height: 188px;
          background: #D8D8D8;
          border-radius: 12px;
        }
        .item-top{
          align-self: flex-start;
          width: 330px;
          font-size: 28px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 40px;
          letter-spacing: 1px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          display: inline-block;
        }
        .item-bottom {
          width: 330px;
          font-size: 22px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 30px;
          letter-spacing: 1px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
     }
    }

  }
}

/*  .video-container:nth-child(2){
    margin-left: 10px;
  } */
/* 视频推荐 */
.video-recommendation {
  margin: 60px 0 0 0px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.video-recommendation .left img {
  height: 18px;
  vertical-align: bottom;
  position: absolute;
  left: 0;
  bottom: -3px;
  padding-left: 1px;
}

.video-recommendation .left span {
  position: absolute;
  bottom: 9px;
  left: 0;
  font-size: 36px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}

.video-recommendation .right img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.video-recommendation .right {
  margin-bottom: 8px;
}

.video-recommendation .right span {
  font-size: 22px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 30px;
}

</style>
